<template>

  <div class="hello">
    <!-- <Pie :pieOptions="pieOptions"></Pie>
    <Pie :pieOptions="pieOptions"></Pie>
    <Bar :barOptions="barOptions"></Bar>
    <Bar :barOptions="barOptions"></Bar> -->
    <div id="container"></div>
  </div>
</template>

<script setup>
import Bar from "./Bar.vue"
import Pie from "@/components/pie.vue"
import { geometries } from '@/unitls/gaoshan.json'
import dataJson from '@/unitls/cun.json'
// import dataJson from '@/unitls/gg.json'
import { ref, onMounted, reactive } from 'vue'
let textColor = "#fff"
let borderColor = "rgba(255,255,255,0.2)"
// import AMapLoader from '@amap/amap-jsapi-loader';
let objPie = {
  tooltip: {
    trigger: 'item',
    // textStyle: {
    //   color: textColor
    // }
  },
  legend: {
    top: 'center',
    right: '30%',
    textStyle: {
      color: textColor
    },
    selected: true,
    selectedMode: false,
    orient: "vertical"
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['40%', '70%'],
      center: ['30%', '50%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 2,
        borderColor: borderColor,
        borderWidth: 1
      },
      label: {
        show: false,
        position: 'center'
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ]
    }
  ]
}

let pieOptions = reactive(objPie)
let objBar = {
  tooltip: {
    trigger: 'axis',
    // textStyle: {
    //   color: textColor
    // }
  },
  legend: {
    show: true,
    top: 'center',
    right: '30%',
    textStyle: {
      color: textColor
    },
    selected: true,
    selectedMode: false,
    orient: "vertical"
  },
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    axisLabel: {
      color: textColor,
    },
    axisLine: {
      show: false,
    }
  },

  yAxis: {
    type: 'value',
    axisLine: {
      show: false,
    },
    axisLabel: {
      color: textColor,
    },
    splitLine: {
      show: false
    }
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar'
    }
  ]
}
let barOptions = reactive(objBar)
const getMap = () => {
  //初始化地图对象，加载地图
  var satellite = new AMap.TileLayer.Satellite();
  var roadNet = new AMap.TileLayer.RoadNet();
  let map = new AMap.Map("container", {
    resizeEnable: true,
    center: [113.217308, 34.786372],//地图中心点
    zoom: 14,//地图显示的缩放级别
    layers: [
      satellite,
      // roadNet
    ],
  });
  getGeoJson(map)
}
// DistrictSearch
// const drawBoundsSearch = (map) => {
//   let district = null
//   let polygons = []
//   //加载行政区划插件
//   if (!district) {
//     //实例化DistrictSearch
//     var opts = {
//       subdistrict: 2,   //获取边界不需要返回下级行政区
//       extensions: 'all',  //返回行政区边界坐标组等具体信息
//       // level: 'district'  //查询行政级别为 市
//       level: 'province'  //查询行政级别为 市
//     };
//     district = new AMap.DistrictSearch(opts);
//   }
//   //行政区查询
//   let level = 'district';
//   let quyu = '荥阳市'
//   // district.setLevel(level)
//   district.search('河南省', function (status, result) {
//     // console.log(result);
//     // district.search('河南省', function (status, result) {
//     if (status === 'complete' && result.districtList.length > 0) {
//       var bounds = result.districtList[0].boundaries;
//       // console.log(bounds, 12);
//       let gaoshanEare = result.districtList[0].districtList
//       if (geometries[0].coordinates && geometries[0].coordinates.length > 0) {
//         // let dataCun = features
//         dataCun.forEach(item => {
//           let data = item.geometry.coordinates
//           let polygon = drawArea(data)
//           polygons.push(polygon);
//         });
//         let polygon = drawArea(geometries[0].coordinates)
//       }
//       map.add(polygons);
//       map.setFitView(polygons);
//       getGeoJson(map)
//     } else {
//       console.log('未查询到荥阳市的行政区划边界');
//     }
//   });
// }

// 画村的标记
// const getCunMark = (map) => {
//   // let date = 
//   // let geometries = []
//   dataJson.features.forEach(item => {
//     let geometries = item.geometry.coordinates
//     // 创建高德地图的边界对象
//     // console.log(geometries);

//   })
//   cunMarkArr.forEach(item => {
//     var amapLngLat = new AMap.LngLat(item.position[0], item.position[1]);
//     let newPosition = []
//     AMap.convertFrom(amapLngLat, 'gps', function (status, result) {
//       if (status === 'complete' && result.info === 'ok') {
//         var gpsLngLat = result.locations[0];
//         // console.log(gpsLngLat,12);
//         var gpsLng = gpsLngLat.lng; // 转换后的 GPS 经度
//         var gpsLat = gpsLngLat.lat; // 转换后的 GPS 纬度
//         // console.log(gpsLng, gpsLat, 22);
//         item.position[0] = gpsLng
//         item.position[1] = gpsLat;
//         // console.log(newPosition);
//         // 在这里可以使用转换后的 GPS 坐标进行后续操作
//         // console.log('GPS 坐标：', gpsLng, gpsLat);
//       } else {
//         console.log('坐标转换失败');
//       }
//     });
//     var marker = new AMap.Marker({
//       position: item.position,
//       icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
//       offset: new AMap.Pixel(-13, -30)
//     });
//     map.add(marker);
//   })
// }
//  画村的
// const drawArea = (data) => {
//   if (data && data.length > 0) {
//     var polygon = new AMap.Polygon({
//       strokeWeight: 2,
//       // path: bounds,
//       path: data,
//       fillOpacity: 0.1,
//       fillColor: '#80d8ff',
//       strokeColor: 'rgb(228, 236, 135)'
//     });
//     return polygon;
//   }
// }
// 使用geoJson

function getGeoJson(map) {
  var geojsonLayer = new AMap.GeoJSON({
    geoJSON: dataJson,
    getMarker: function (geojson, lnglat) {
      console.log(geojson, lnglat);
      var text = geojson.properties.name; // 获取文本内容
      // 创建文本标记对象
      var marker = new AMap.Marker({
        position: lnglat,
        text: text
      });

      // 添加自定义事件监听器
      marker.on('click', function () {
        console.log('Marker clicked:', text); // 打印调试信息
      });

      return marker;
    },
    // getPolyline: function (geojson, lnglats) {
    //   // console.log('aaa');
    //   console.log(lnglats, 222);
    //   return new AMap.Polyline({
    //     path: lnglats,
    //     strokeColor: '#FF0000',
    //     strokeOpacity: 0.8,
    //     strokeWeight: 5
    //   })
    // },
    getPolygon: function (geojson, lnglats) {
      // // 计算边界范围的中心点作为文本标记的位置
      // // console.log(geojson.properties.center,222);
      // var centerLng = 0;
      // var centerLat = 0;

      // // 遍历边界经纬度数组，并累加经度和纬度
      // for (var i = 0; i < lnglats[0].length; i++) {
      //   var lng = lnglats[0][i][0];
      //   var lat = lnglats[0][i][1];

      //   centerLng += lng;
      //   centerLat += lat;
      // }

      // // 计算平均经度和纬度
      // centerLng /= lnglats[0].length;
      // centerLat /= lnglats[0].length;

      // // 构建中心点的经纬度数组
      // var center = [centerLng, centerLat];

      // // 创建文本标记对象
      // var textMarker = new AMap.Text({
      //   text: geojson.properties.name, // 设置文本内容
      //   position: center, // 设置标记的位置为边界范围的中心点
      //   anchor: 'center', // 设置文本锚点为中心
      //   style: {
      //     color: '#000', // 文本颜色
      //     fontSize: "16px", // 字体大小
      //     fontWeight: 'bold' // 字体粗细
      //   }
      // });
      // map.add(textMarker);
      // 监听地图缩放层级变化事件
      // map.on('zoomchange', function () {
      //   var zoom = map.getZoom();

      //   // 根据地图层级判断是否显示文字标记
      //   if (zoom < 13) {
      //     textMarker.hide();
      //   } else {

      //     textMarker.show();
      //   }
      // });
      // 计算面积
      var area = AMap.GeometryUtil.ringArea(lnglats[0])
      return new AMap.Polygon({
        path: lnglats,
        fillOpacity: 0.3,// 面积越大透明度越高
        strokeColor: 'white',
        fillColor: 'red'
      });
    }

  });
  map.add(geojsonLayer);
  // geojsonLayer.on('click', function (event) {
  //   // 获取被点击的区域的边界
  //   var bounds = event.target.getBounds();
  //   // 放大到该区域的边界
  //   map.setBounds(bounds);
  // });


}

onMounted(() => {
  getMap()
})
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  /* color: transparent; */
  color: rgb(228, 236, 135);
}

.pie,
.bar {
  z-index: 10;
}
</style>
